<style lang='scss' type='stylesheet/scss' scoped>
</style>

<template>
  <div class="as-input"
       @click="$emit('click')"
       :class="[size?'as-input--'+size:'',
        {'is-disabled':disabled,
         'is-hover':isHover}
       ]">

    <template v-if="type !== 'textarea'">
      <span class="as-input__prepend"
            ref="prepend"
            v-if="$slots&&$slots.prepend">
        <slot name="prepend"></slot>
      </span>

      <span class="as-input__append"
            ref="append"
            v-if="$slots&&$slots.append">
        <slot name="append"></slot>
      </span>

      <input :type="type"
             class="as-input__inner"
             :style="{
                paddingRight:clearable||suffixIcon?'30px':maxlength&&showLengthLimit?'40px':'',
                paddingLeft:prefixIcon?'30px':''
              }"
             :class="[maxlength&&showLengthLimit&&value.length>maxlength?'as-input__inner--danger':'',{
              'is-active':focusState||isFocus,
              },]"
             ref="input"
             :tabindex="tabindex"
             :placeholder="placeholder"
             :maxlength="maxlength"
             :minlength="minlength"
             @blur="handlerBlur"
             @focus="handlerFocus"
             :disabled="disabled"
             v-model="model">
      <i class="el-icon-error after-icon clear-icon"
         :style="{marginRight:iconRight+'px'}"
         @click="emptyValue"
         v-if="clearable&&value"></i>

      <i :class="prefixIcon"
         v-if="prefixIcon"
         :style="{marginLeft:iconLeft+'px'}"
         class="before-icon"></i>

      <span v-if="maxlength&&showLengthLimit"
            class="after-limit">{{value.length}}/{{maxlength}}</span>

      <i :class="suffixIcon"
         v-else-if="suffixIcon"
         :style="{marginRight:iconRight+'px'}"
         class="after-icon"></i>
    </template>

    <div class="as-textarea"
         :style="{height:rows*21+'px'}"
         :class="[{'is-active':focusState,}]"
         v-else>
      <textarea type="textarea"
                class="as-textarea__inner"
                :placeholder="placeholder"
                :maxlength="maxlength"
                :minlength="minlength"
                :tabindex="tabindex"
                @blur="handlerBlur"
                @focus="handlerFocus"
                :disabled="disabled"
                ref="input"
                :class="[maxlength&&showLengthLimit&&value.length>maxlength?'as-textarea__inner--danger':'',]"
                :style="{height:rows*21+'px'}"
                v-model="model">
      </textarea>
      <span v-if="maxlength&&showLengthLimit"
            class="after-limit">{{value.length}}/{{maxlength}}</span>
    </div>

  </div>
</template>

<script type='text/ecmascript-6'>
export default {
  name: "AsInput",
  props: {
    type: {
      type: String,
      default: ""
    },
    value: {},
    placeholder: String,
    maxlength: [String, Number],
    minlength: [String, Number],
    showLengthLimit: Boolean,
    size: String,
    clearable: Boolean,
    prefixIcon: String,
    suffixIcon: String,
    disabled: Boolean,
    rows: Number,
    autofocus: Boolean,
    isHover: Boolean,
    isFocus: Boolean,
    tabindex: {}
  },

  mounted() {
    if (this.autofocus) {
      this.$refs.input.focus();
    }

    this.updateIconOffset();
  },

  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    updateIconOffset() {
      if (this.$slots.prepend) {
        this.$slots.prepend.splice(1);
      }
      if (this.$slots.append) {
        this.$slots.append.splice(1);
      }
      if (this.$refs.prepend) {
        this.iconLeft = this.$refs.prepend.getBoundingClientRect().width;
      }

      if (this.$refs.append) {
        this.iconRight = this.$refs.append.getBoundingClientRect().width;
      }
    },
    handlerFocus() {
      this.focusState = true;
      this.$emit("focus");
    },
    handlerBlur() {
      window.scrollTo(0, 0);
      this.focusState = false;
      this.$emit("blur");
    },
    blur() {
      this.$refs.input.blur();
    },
    focus() {
      this.$refs.input.focus();
    },
    emptyValue() {
      this.$emit("input", "");
      this.focus();
    }
  },
  data() {
    return {
      focusState: false,
      iconLeft: "",
      iconRight: ""
    };
  }
};
</script>
